<template>
	<view class="confirmOrder">
		<view class="" v-if="!isSend">
			<view class="" v-if="addressList.length == 0" @tap.stop="goAddress">
				<view class="address" style="line-height: 30rpx;height: 80rpx;">
					请选择收获地址
				<u-icon name="arrow-right" size="24" color="#7F8084" style="float: right;"></u-icon></view>
			</view>
			<view v-else class="address" @tap.stop="goAddress" v-for="(item,index) in addressList" :key="index">
				<view class="address_t flex-r-b-c">
					<view class="address_t_l flex-r-c-c">
						<image src="/static/my/dz.png" mode=""></image>
						<view class="title">{{item.receipt_address}} {{item.address}}</view>
					</view>
					<u-icon name="arrow-right" color="#B6B6B6"></u-icon>
				</view>
				<view class="address_b">{{item.name}} | {{item.mobile}}</view>
			</view>
		</view>
		<!-- 订单详情 -->
		<view class="orderDetails">
			<view class="title">订单详情</view>
			<view class="detailsBox flex-r-b-c">
				<image :src="picture" mode=""></image>
				<view class="details_r">
					<view class="details_r_t flex-r-b-c">
						<view class="name">{{name}}</view>
						<view class="money" style="font-weight: 500;">¥{{Number(pageData.goods_price).toFixed(2)||0.00}}</view>
					</view>
					<view class="details_r_b flex-r-b-s">
						<view class="Specifications">{{guige}}</view>
						<view class="quantity" style="font-size: 28rpx;">x{{pageData.num}}</view>
					</view>
				</view>
			</view>
			
			<view class="costBox">
				<view class="cost flex-r-b-c">
					<view class="text">打包费</view>
					<view class="money">¥{{Number(pageData.packing_price).toFixed(2)||0.00}}</view>
					<!-- <view class="money">¥{{Number(pageData.packing_price).toFixed(2)||0.00}}</view> -->
				</view>
				<view class="cost flex-r-b-c" style="margin-top: 20rpx;">
					<view class="text">配送费</view>
					<view class="money" v-if="addressList.length==0">--</view>
					<view class="money" v-else>¥{{Number(pageData.distribution_price).toFixed(2)||0.00}}</view>
					
				</view>
			</view>
			
			
			<view class="total flex-r-b-c">
				<view class=""> </view>
				<view class="total_r">
					<view class="text">共{{pageData.num}}件，合计：<view class="money">¥{{Number(pageData.actual_price).toFixed(2)||0.00}}</view> </view>
				</view>
			</view>
			
		</view>
		
		<view class="btnBox flex-r-b-c">
			<view class="btn_l">合计：<view class="money">¥{{Number(pageData.actual_price).toFixed(2)||0.00}}</view></view>
			<button class="btn_r"  open-type="share" @tap.stop="go">发给好友</button>
		</view>
		
	</view>
</template>

<script>
import { renderSlot } from "vue";
	export default {
		data() {
			return {
				image: this.$base.smallimgUrl,
				orderid: '',
				shaddressid: '',
				pageData: {},
				share: {},
				guige: '',
				name:'',
				picture:'',
				addressList: [],
				order_number: '',
				address_id:'',
				isSend : false
			};
		},
		onLoad(el) {
			let  res  = JSON.parse(el.res)
			this.name = res.name
			this.picture = this.image + res.picture
			this.shop_id = res.shop_id
			this.goods_id = res.goods_id
			this.num = res.num
			this.child = res.child
			this.getAddress()
			// this.getConfirmOrder()
		},
			
		onShow(){
			// console.log(this.addressList,'addressList')
		},
		// 发给好友
		toFriend(){
			if(!this.addressList){
				this.$utils.toast('请选择收获地址')
			}
		},
		async onShareAppMessage(){
			if(this.addressList.length != 0){
				this.isSend = true
			}else{
				this.isSend = false
			}
			
			// console.log(this.isSend,'发发发发')
			let that = this
			await that.$api.orderConfirm({
				shop_id: that.shop_id,
				goods_id: that.goods_id,
				child: that.child,
				address_id : that.addressList[0].id,
				num: that.num
			}).then(res => {
				that.order_number = res.data.data.order_number
				that.share = {
					title: '',
					path: `/pages/purchase/purchase?order_number=${that.order_number}&goods_img=${that.picture}&goods_name=${that.name}`,
					imageUrl: '',
					desc: '',
					content: ''
				}
				// this.isSend = false
			})
			
			
			return {
				title: that.share.title,
				path: that.share.path,
				imageUrl: that.share.imageUrl,
				desc: that.share.desc,
				content: that.share.content,
				success(res) {
					
					console.log(res,'res')
					uni.showToast({
						title: '分享成功',
						icon: "none"
					})
					that.share = {}
					console.log(res)
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			}
			
			
		},
		methods: {
			// 获取地址
			getAddress(){
				let that = this
				that.$api.addressList(
				).then(res => {
					that.addressList = res.data.data.filter(item => item.is_default == 1)
					// console.log(that.addressList,'that.addressList')
					if(that.addressList.length!=0){
						that.address_id = that.addressList[0].id
					}
					
					that.getConfirmOrder()
				})
			},
			// 获取订单
			getConfirmOrder(){
				// console.log(this.addressList,'that.addressList2')
				
				let that = this
				if(that.addressList.length!=0){
					if(that.address_id==''){
						that.address_id = that.addressList[0].id
					}
				}
				
				that.$api.calculation({
					shop_id: that.shop_id,
					goods_id: that.goods_id,
					address_id : that.address_id,
					num: that.num,
					child: that.child,
				}).then(res => {
					let guige = []
					that.pageData = res.data.data
					that.pageData.minitype.length == 0 ? that.guige = '无' : that.pageData.minitype.map(e => {
						guige.push(e)
					})
					that.guige = guige.join('+')
				})
			},
			// 跳转地址列表
			goAddress(){
				uni.navigateTo({
					url: '/pages/my/address/address'
				})
			},
			go(){
				if(this.addressList.length == 0) {
					this.$utils.toast('请选择收获地址')
					setTimeout(()=>{
						uni.navigateTo({
							url: '/pages/my/address/address'
						})
					},1000)
				}
			}
		}
	}
</script>

<style lang="less">
	page{
		background-color: #f9f9f9;
	}
	.confirmOrder{
		width: 100vw;
		.address{
			width: 90%;
			margin: 40rpx auto;
			padding: 30rpx;
			background-color: #fff;
			border-radius: 20rpx;
			
			.address_t{
				width: 100%;
				.address_t_l{
					image{
						width: 24rpx;
						height: 30rpx;
						margin-right: 20rpx;
					}
					.title{
						font-size: 28rpx;
						font-weight: 400;
					}
				}
			}
			
			.address_b{
				font-size: 24rpx;
				font-weight: 400;
				color: #7F8084;
				margin-top: 20rpx;
			}
			
		}
		
		
		.orderDetails{
			width: 90%;
			margin: 40rpx auto;
			padding: 30rpx;
			border-radius: 20rpx;
			background-color: #fff;
			.title{
				font-size: 32rpx;
				font-weight: 400;
				margin-bottom: 20rpx;
			}
			.detailsBox{
				width: 100%;
				padding-bottom: 30rpx;
				border-bottom: 1px solid #F9F9F9;
				image{
					width: 139rpx;
					height: 154rpx;
				}
				.details_r{
					width: 70%;
					.details_r_t{
						font-size: 28rpx;
						font-weight: 400;
					}
					.details_r_b{
						margin-top: 20rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #7F8084;
						.Specifications{
							width: 60%;
						}
					}
				}
			}
		}
		
		
		.costBox{
			width: 100%;
			padding: 30rpx 0rpx;
			border-bottom: 1px solid #F9F9F9;
			.cost{
				font-size: 28rpx;
				font-weight: 400;
				color: #7F8084;
			}
		}
		
		.total{
			padding: 20rpx 0rpx;
			.total_r{
				font-size: 28rpx;
				font-weight: 400;
				color: #7F8084;
				.money{
					display: inline-block;
					font-size: 32rpx;
					color: #000;
				}
			}
		}
		
		.btnBox{
			width: 100%;
			height: 140rpx;
			padding: 0rpx 30rpx;
			background-color: #fff;
			position: fixed;
			left: 0;
			bottom: constant(safe-area-inset-bottom);
			bottom: env(safe-area-inset-bottom);
			.btn_l{
				font-size: 32rpx;
				font-weight: 400;
				color: #7F8084;
				.money{
					display: inline-block;
					color: #000;
				}
			}
			.btn_r{
				margin: 0;
				padding: 0;
				width: 226rpx;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				border-radius: 80rpx;
				background-color: #000;
				color: #fff;
				font-size: 28rpx;
				font-weight: 500;
			}
		}
		
		
	}
</style>
